iT邦幫忙

2024 iThome 鐵人賽

DAY 11
1

大家好,我是Karin。今天要來了解HTTP通訊協定,以及網頁前後端的連接概念。
因為實在是覺得有點抽象,所以又找了一些資訊來看。

學習內容來自:
彭彭的課程-HTTP通訊協定
https://youtube.com/playlist?list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&si=GUZKKA1B-l6bBBS
網路如何運作
https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/How_the_Web_works

網址(URL)的組成

通訊協定://主機名稱/路徑

  • 通訊協定(Protocol):http
  • 主機名稱(Hostname):要連到哪一台主機
  • 路徑(Path):需要這台主機底下的哪一項服務

通訊協定是一套系統化規則,用來定義電腦間如何交換資料。(可以想像成是一種語言)
我們藉由網址,讓前端(瀏覽器)去取得後端系統(伺服器)的資源。

範例:https://ithelp.ithome.com.tw/2024ironman/

  • ithelp.ithome.com.tw 是網站的伺服器名稱
  • 2024ironman 是網站中其中的一個項目

前後端的運作

簡單的連接過程

  1. 使用者發送請求:在瀏覽器中輸入網址。
  2. DNS查詢:瀏覽器透過 DNS 查詢該網址的 IP 位址。
  3. HTTP 請求:瀏覽器向此 IP 位址發送一個 HTTP 請求。
  4. 伺服器回應:伺服器收到 HTTP 請求後,處理請求並回應內容,再通過 HTTP 回傳"資料封包"給瀏覽器。
  5. 顯示內容:瀏覽器接收 HTTP 回應,並顯示網頁內容給使用者。
  • DNS(Domain Name System 網域名稱系統)像是網站的電話簿。當你在瀏覽器輸入網址時,瀏覽器會先去看 DNS 以查到網站的 IP 位址。我們也可以使用 DNS 查找工具(https://www.nslookup.io/website-to-ip-lookup/),來查網站的 IP 位址。
  • IP 位址就像是網址的身分證字號,通常是一串數字(如63.245.215.20)。因為網絡上的設備(如伺服器和路由器)需要使用 IP 位址來進行通信,所以需要透過DNS系統來將網址(人看的)轉換成IP位址(電腦看得懂的)。

花了很多時間大概對前後端的連接有基本的理解了,明天再來做實作練習。


上一篇
Day 10 Event Handling
下一篇
Day 12 fetch函式建立連線
系列文
每天都進步一點!從零開始的JavaScript 與基礎網路知識學習26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言